<template>
  <hx-page>
    <div class='chargeInfo'>
      <div class="hx-input">
        <div class="hx-input-label">充值卡号</div>
        <input
            type='text'
            placeholder='请输入一卡通卡号'
            v-model="cardNo"
        />
      </div>
      <div class='chargeInfo_ipt'>
        <div class='chargeInfo_ipt_left hx-input'>
          <div class="hx-input-label">充值金额</div>
          <input
              type='number'
              maxLength='8'
              placeholder='请输入或者选择充值金额'
              v-model="money"
          />
        </div>
        <div class='chargeInfo_ipt_right'>
          元
        </div>
      </div>
      <div class='chargeInfo_select'>
        <div
            v-for="item in moneyList"
            :key="item"
            :class="[(money-item ===0 ) ? 'chargeInfo_select_active':'','chargeInfo_select_item']"
            @click="changeMoney(item)">{{ item }}元
        </div>
      </div>
    </div>

    <div class='confirm'>
      <div class='confirm_left'>
        应付：
        <div v-if="parseFloat(money) > 0"
             class='confirm_left_money'>¥{{ money }}
        </div>
      </div>
      <div
          :class="[(parseFloat(money)> 0 && cardNo.length > 0)?'':'confirm_disable','confirm_right']"
          @click="onSubmit">
        确定
      </div>
    </div>
  </hx-page>
</template>

<script>
import {HxPost} from "../../../service/http";

export default {
  data() {
    return {
      cardNo: '',
      money: '',
      moneyList: [30, 50, 100, 200]
    };
  },
  onLoad() {
  },
  methods: {
    onSubmit() {
      this.money = (this.money + '').replace(/(\.*$)/g, '')
      if (!this.money || !this.cardNo) {
        return;
      }
      uni.showLoading({title: '加载中...', mask: true})
          .then(() => {
            return HxPost('cardInfo', {cardId: this.cardNo});
          })
          .then((data) => {
            uni.hideLoading();
            return uni.navigateTo({
              url: '/pages/chargeDetail/index?chargetype=2&money=' + this.money + '&cardInfo=' + JSON.stringify(data)
            });
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
          });
    },

    changeMoney(money) {
      this.money = money
    }
  }
};
</script>

<style lang="scss" scoped>
.chargeInfo {
  border-top: 1PX solid #e1e1e1;
  border-bottom: 1PX solid #e1e1e1;
  background: #FFFFFF;

  /* .at-input__title {
       font-weight: 700;
   }

   .at-input input{
       font-weight: 700;
   }*/

  &_ipt {
    display: flex;
    flex-direction: row;

    &_left {
      display: flex;
      flex: 5;

      .at-input input {
        color: #b71120;
      }
    }

    &_right {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      font-size: 14PX;
      font-weight: 700;
    }
  }

  &_select {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &_item {
      display: flex;
      flex: 1;
      border: 1PX solid #b71120;
      color: #b71120;
      justify-content: center;
      align-items: center;
      margin: 10PX;
      padding: 5PX;
    }

    &_active {
      color: #FFFFFF;
      background: #b71120;
    }
  }
}

.confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  font-size: 16PX;

  &_left {
    display: flex;
    flex: 2;
    padding-left: 18PX;
    align-items: center;
    background: #FFFFFF;
    border-top: 1PX solid #e1e1e1;

    &_money {
      display: inline-block;
      padding: 0 2PX;
      color: #b71120;
    }
  }

  &_right {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    line-height: 3;
    background: #b71120;
    color: #FFFFFF;
  }

  &_disable {
    background: #dcacaf;
  }
}
</style>
